<!-- 所有指令使用
  1,v-bind：单项绑定解析表达式 可简写成 :XXX
  2,v-model：双向数据绑定
  3,v-for：数组遍历
  4,v-on：绑定事件 可简写为 @
  5,v-else：条件渲染(动态控制节点是否存在)
  6,v-show：条件渲染(动态控制节点是否展示)
  7,v-text：向其所在的节点中渲染节点内容 与插值语法的区别 v-test会替换掉节点中内容 {{内容}}不会替换
  8,v-html：支持标签结构的解析 v-test不支持
  9,v-once：初次页面渲染完成后 就视为静态内容了 以后数据的改变不会引起v-once所在节点更新 用于优化性能
  10,v-pre：跳过其所在节点编译过程 可加快编译
  11,自定义指令 需求：1,定义一个v-big指令，功能与v-text相似 但是会把内容放大十倍
  2，定一个v-fbind指令，和v-bind功能相似，但可以让其所绑定的input元素默认获取焦点
-->
<template>
    <div class="test2">
      <h1 v-text="timeStr">标签内的内容</h1>
      <h1 v-html="htmlStr">标签内容</h1>

      <div v-pre>pres数据展示</div>
      <div v-once >{{addNum}}初次节点</div>
      <div>{{addNum}}</div>
      <button @click="clickAdd">点我加1</button>
      <div>当前的值是
        <span v-text="n"></span>
      </div>
      <div>放大十倍的值是
        <span v-big="n"></span>
      </div>
      <button @click="clickAdd">点我加1</button>
      <hr/>
      <input type="text" v-fbind="m">
      <hr/>
      <a :href="url">我是一个vbind链接</a>
    </div>
  </template>
    
    <script>
  // @ is an alias to /src
  // import HelloWorld from '@/components/HelloWorld.vue'
  export default {
    name: "test2",
    data() {
      return {
        timeStr: "标签外内容",
        htmlStr: "<h4>我是标签</h4>",
        addNum:3,
        n:4,
        m:10,
        url:"http://baidu.com"
      };
    },
    methods: {
      clickAdd(){
        this.addNum ++
        this.n ++ 
        console.log("我的手机")
      }
    },
    // 自定义指令 指令相关的函数里面指向的都是window
    directives:{
      // element 标签元素 
      // 指令何时被调用：1，指令与元素成功绑定时会被调用（一开始）2，指令所在模板被重新渲染时
      'big'(element,binding){
        console.log("自定义指令")
        element.innerText = binding.value * 10
        console.log(element)
        console.log(binding.value)
      },
      // fbind(element,binding){
      //   element.value = binding.value
      //   element.focus()
      // }
      // 自定义指令最全写法 特殊需求时使用 普通上面即可
      fbind:{
        // 指令与元素绑定成功是（一上来）
        bind(element,binding){
          element.value = binding.value
        },
        // 指令所在元素被插入页面时
        inserted(element,binding){
          element.focus()
        },
        // 指令所在模板被重新解析时
        update(element,binding){
          element.value = binding.value
        }
      }
    }
  };
  </script>
    
    <style scoped>
  </style>